<template>
  <PageWrapper title="右键菜单示例">
    <CollapseContainer title="Simple">
      <a-button type="primary" @contextmenu="handleContext"> Right Click on me </a-button>
    </CollapseContainer>

    <CollapseContainer title="Multiple" class="mt-4">
      <a-button type="primary" @contextmenu="handleMultipleContext"> Right Click on me </a-button>
    </CollapseContainer>
  </PageWrapper>
</template>
<script lang="ts" setup>
import { useContextMenu } from '@/hooks/web/useContextMenu'
import { CollapseContainer } from '@/components/Container'
import { useMessage } from '@/hooks/web/useMessage'
import { PageWrapper } from '@/components/Page'

const [createContextMenu] = useContextMenu()
const { createMessage } = useMessage()
function handleContext(e: MouseEvent) {
  createContextMenu({
    event: e,
    items: [
      {
        label: 'New',
        icon: 'bi:plus',
        handler: () => {
          createMessage.success('click new')
        }
      },
      {
        label: 'Open',
        icon: 'bx:bxs-folder-open',
        handler: () => {
          createMessage.success('click open')
        }
      }
    ]
  })
}

function handleMultipleContext(e: MouseEvent) {
  createContextMenu({
    event: e,
    items: [
      {
        label: 'New',
        icon: 'bi:plus',

        children: [
          {
            label: 'New1-1',
            icon: 'bi:plus',
            divider: true,
            children: [
              {
                label: 'New1-1-1',
                handler: () => {
                  createMessage.success('click new')
                }
              },
              {
                label: 'New1-2-1',
                disabled: true
              }
            ]
          },
          {
            label: 'New1-2',
            icon: 'bi:plus'
          }
        ]
      }
    ]
  })
}
</script>
